<template>
  <el-dialog title="字典项管理" :visible.sync="dialogVisible" custom-class="managementDialog" width="1200px" @close="innerBeforeClose">
    <dataList
      v-if="dialogVisible"
      ref="managementCrud"
      noPadding
      openIndex
      operaColumnWidth="120"
      :pageInfo="pager"
      :listData="tableData"
      :dataInfo="dataInfo"
      :operaInfo="operaInfo"
      :menuList="['add']"
      :listLayout="['menu']"
      @btn-click="handleBtnClick"
      @menu-click="handleManagementClick"
    />
    <v-dialog
      :title="isInnerEdit ? '编辑' : '新增'"
      :show.sync="dialogInner"
      width="1000px"
      v-loading="innerLoading"
      @beforeClose="innerBeforeClose"
      element-loading-text="正在保存..."
      append-to-body
    >
      <el-form ref="innerDictForm" :model="innerForm" label-width="80px" :rules="innerForm_rules">
        <el-form-item label="类型" prop="type">
          <el-input v-halfCharCode v-model="innerForm.type" placeholder="请输入类型" disabled />
        </el-form-item>
        <el-form-item label="数据值" prop="value">
          <el-input v-halfCharCode v-model="innerForm.value" placeholder="请输入数据值" />
        </el-form-item>
        <el-form-item label="标签名" prop="label">
          <el-input v-halfCharCode v-model="innerForm.label" placeholder="请输入标签名" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-halfCharCode v-model="innerForm.description" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-halfCharCode type="number" :min="0" v-model="innerForm.sort" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="备注信息" prop="remarks">
          <el-input v-halfCharCode type="textarea" maxlength="100" placeholder="请输入备注信息" v-model="innerForm.remarks" />
        </el-form-item>
      </el-form>
      <span slot="foot">
        <el-button v-throttle="[innerCommit]">{{isInnerEdit ? '修 改' : '保 存'}}</el-button>
        <el-button @click="handleInnerCancel">取 消</el-button>
      </span>
    </v-dialog>
  </el-dialog>
</template>

<script>
import { addItemObj, delItemObj, fetchItemList, putItemObj } from '~/admin/api/dict'
export default {
  name: "dict-inner",
  provide () {
    return {
      initList: this.getListData
    };
  },
  beforeMount () {
    this.getListData()
    this.dictTypes = this.getDict('dict_type')
  },
  data () {
    return {
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 10
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      // 页面loading
      loading: false,
      dialogVisible: false,
      // 字典子弹框
      dialogInner: false,
      innerLoading: false,
      isInnerEdit: false,
      dictId: '',
      dictType: '',
      innerForm: {
        type: '',
        dictId: '',
        value: '',
        label: '',
        description: '',
        sort: '1',
        remarks: ''
      },
      innerForm_rules: {
        value: [{ required: true, message: '请输入数据值', trigger: 'blur' }],
        label: [{ required: true, message: '请输入标签名', trigger: 'blur' }],
        description: [{ required: true, message: '请输入字典描述', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      }
    }
  },
  computed: {
    // 配置表头
    dataInfo () {
      return [
        { label: '类型', prop: 'type' },
        { label: '数据值', prop: 'value' },
        { label: '标签名', prop: 'label' },
        { label: '描述', prop: 'description' },
        { label: '排序', prop: 'sort' },
        { label: '备注信息', prop: 'remarks', }
      ]
    },
    // 操作项配置
    operaInfo () {
      return [
        { label: '编辑', name: 'edit' },
        { label: '删除', name: 'delete' }
      ]
    }
  },
  methods: {
    //打开弹框
    dictInnerShow (row) {
      this.dialogVisible = true
      this.dictType = row.type
      this.dictId = row.id
      this.getListData({ dictId: row.id, type: row.type })
    },
    // 获取列表
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      fetchItemList(requestData)
        .then(res => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 字典项菜单点击监听
    handleManagementClick (type) {
      switch (type) {
        case "add":
          this.handleManagementCreate();
          break;
        default:
          this.$message(type);
          break;
      }
    },
    // 按钮点击监听
    handleBtnClick ({ type, row }) {
      switch (type) {
        case 'edit':
          this.handleManagementUpdate(row)
          break;
        case 'delete':
          this.handleManagementDelete(row)
          break;
        default:
          break;
      }
    },
    // 字典项弹框新增
    handleManagementCreate () {
      this.innerForm = {
        type: this.dictType,
        dictId: this.dictId,
        sort: this.pager.total + 1,
      }
      this.dialogInner = true
    },
    // 字典项弹框编辑
    handleManagementUpdate (row) {
      this.innerForm = row
      this.isInnerEdit = true
      this.dialogInner = true
    },
    // 字典项弹框删除
    handleManagementDelete (row) {
      this.$confirm('是否确认删除数据为"' + row.label + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delItemObj(row.id)
      }).then(() => {
        this.getListData({ dictId: this.dictId, type: this.dictType })
        this.$notify.success('删除成功')
      })
    },
    // 字典子弹框关闭
    innerBeforeClose (done) {
      this.tableData.length = 0
      this.params = {
        current: 1,
        size: 10
      }
      this.pager = {
        total: 0,
        current: 1,
        size: 10
      }
      this.handleInnerCancel()
    },
    // 字典子弹框保存或修改
    innerCommit () {
      this.$refs.innerDictForm.validate(valid => {
        if (valid) {
          this.innerLoading = true
          if (this.isInnerEdit) {
            putItemObj(this.innerForm).then(res => {
              if (res.data.code === 0) {
                this.$notify.success('修改成功')
                this.innerLoading = false
                this.isInnerEdit = false
                this.handleInnerCancel()
              } else {
                this.$notify.error('修改失败')
                this.innerLoading = false
                this.isInnerEdit = false
                this.handleInnerCancel()
              }
            }).catch(() => {
              this.innerLoading = false
            })
          } else {
            addItemObj(this.innerForm).then(res => {
              if (res.data.code === 0) {
                this.$notify.success('添加成功')
                this.innerLoading = false
                this.handleInnerCancel()
              } else {
                this.$notify.error('添加失败')
                this.innerLoading = false
                this.handleInnerCancel()
              }
            }).catch(() => {
              this.innerLoading = false
            })
          }
        }
      })
    },
    // 字典子弹框取消
    handleInnerCancel () {
      this.innerForm = {}
      this.dialogInner = false
      this.getListData()
    }
  }

}
</script>

<style scoped>
</style>
